import React from 'react';
import { Card, Row, Col, Statistic, Space, Table, Typography } from 'antd';
import { 
  ArrowUpOutlined, 
  ArrowDownOutlined, 
  UserOutlined, 
  ShoppingCartOutlined, 
  DollarOutlined, 
  FileOutlined 
} from '@ant-design/icons';
import { Line, Column, Pie } from '@ant-design/plots';
import './Dashboard.scss';

const { Title } = Typography;

// 销售趋势数据
const salesTrendData = Array.from({ length: 12 }, (_, index) => ({
  month: `${index + 1}月`,
  sales: Math.floor(Math.random() * 5000) + 2000,
  profit: Math.floor(Math.random() * 2000) + 1000,
}));

// 品类分布数据
const categoryData = [
  { type: '电子产品', value: 27 },
  { type: '服装', value: 25 },
  { type: '食品', value: 18 },
  { type: '家居', value: 15 },
  { type: '其他', value: 15 },
];

// 最近订单数据
const recentOrders = Array.from({ length: 5 }, (_, index) => ({
  key: index.toString(),
  orderNo: `ORD${String(index + 1).padStart(6, '0')}`,
  customer: `客户${index + 1}`,
  amount: Math.floor(Math.random() * 10000) + 1000,
  status: ['已完成', '处理中', '待支付'][Math.floor(Math.random() * 3)],
}));

const Dashboard: React.FC = () => {
  // 销售趋势配置
  const salesConfig = {
    data: salesTrendData,
    xField: 'month',
    yField: 'sales',
    smooth: true,
    meta: {
      sales: {
        alias: '销售额(元)',
      },
    },
  };

  // 利润趋势配置
  const profitConfig = {
    data: salesTrendData,
    xField: 'month',
    yField: 'profit',
    columnStyle: {
      radius: [4, 4, 0, 0],
    },
    meta: {
      profit: {
        alias: '利润(元)',
      },
    },
  };

  // 品类分布配置
  const pieConfig = {
    data: categoryData,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {
      type: 'outer',
      content: '{name} {percentage}',
    },
    interactions: [{ type: 'element-active' }],
  };

  return (
    <Space direction="vertical" size="middle" className="dashboard" style={{ width: '100%' }}>
      <Title level={2}>仪表盘</Title>
      
      {/* 数据概览 */}
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} lg={6}>
          <Card hoverable>
            <Statistic
              title="用户总数"
              value={1128}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
              suffix="人"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card hoverable>
            <Statistic
              title="订单总数"
              value={93}
              prefix={<ShoppingCartOutlined />}
              valueStyle={{ color: '#cf1322' }}
              suffix="单"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card hoverable>
            <Statistic
              title="销售额"
              value={25600}
              prefix={<DollarOutlined />}
              precision={2}
              suffix="元"
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card hoverable>
            <Statistic
              title="文件数"
              value={78}
              prefix={<FileOutlined />}
              suffix="个"
            />
          </Card>
        </Col>
      </Row>

      {/* 图表区域 */}
      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card title="销售趋势" hoverable>
            <Line {...salesConfig} />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="利润分析" hoverable>
            <Column {...profitConfig} />
          </Card>
        </Col>
      </Row>

      <Row gutter={[16, 16]}>
        <Col xs={24} lg={12}>
          <Card title="品类分布" hoverable>
            <Pie {...pieConfig} />
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="最近订单" hoverable>
            <Table
              dataSource={recentOrders}
              pagination={false}
              size="small"
              columns={[
                {
                  title: '订单编号',
                  dataIndex: 'orderNo',
                  key: 'orderNo',
                },
                {
                  title: '客户',
                  dataIndex: 'customer',
                  key: 'customer',
                },
                {
                  title: '金额',
                  dataIndex: 'amount',
                  key: 'amount',
                  render: (amount: number) => `¥${amount.toFixed(2)}`,
                },
                {
                  title: '状态',
                  dataIndex: 'status',
                  key: 'status',
                },
              ]}
            />
          </Card>
        </Col>
      </Row>
    </Space>
  );
};

export default Dashboard; 